<template>
    <div>
        <el-upload
            class="upload-demo"
            action=""
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :http-request="uploadSectionFile"
            :on-remove="handleRemove"
            :on-change="handleChange"
            accept=".pdf,.PDF">
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <div v-if="progressSeen">
            <el-progress :text-inside="true" :stroke-width="13" :percentage="percentage" status="success"></el-progress>
        </div>
    </div>
</template>

<script>
  import {upLoadPdf} from '../api/upPdfApi'

  export default {
        name: "uploadPdf",
        data() {
            return {
              percentage: 0,
            }
        },
        props: {
          fileList: {
            type: Array
          },
          progressSeen: {
            type: Boolean,
            default: false
          }
        },
        methods: {
          async uploadSectionFile(params) {
            const file = params.file
            console.log(file.type)
            if (!file.type.endsWith('/pdf')) {
              this.$message.warning('请上传正确的pdf格式')
              this.fileList = []
              return false
            }
            const form = new FormData()
            form.append("file", file)
            let config = {
              headers: {
                "Content-Type": "multipart/form-data"
              },
              onUploadProgress: progressEvent => {
                // console.log(progressEvent)
                this.percentage = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
              }
            }
            const res = await upLoadPdf(form, config)
            if (res.code === 0) {
              this.$message.success('上传成功')
              console.log(res)
              this.$emit('chooseFile', res.data.filename)
            } else {
              this.$message.error('上传失败,请重新上传')
              this.$emit('handleChangeFile', false)
            }
          },
          handleExceed(files, fileList) {
            // this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
            this.$message.warning(`当前限制选择 1 个文件`)
          },
          handleRemove(file) {
            console.log(file)
            this.$emit('chooseFile', false)
            this.$emit('handleChangeFile', false)
          },
          handleChange(file) {
            // this.progressSeen = true
            this.$emit('handleChangeFile', true)
          }
        }
    }
</script>

<style scoped lang="scss">
.el-progress {
    font-size: 12px;
}
</style>
